<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>文章回收站</span>
      </div>
    </template>
    <!-- 文章列表 -->
    <el-table :data="articles" style="width: 100%">
      <el-table-column label="文章标题" width="180" prop="title"></el-table-column>
      <el-table-column label="分类" prop="categoryName"></el-table-column>
      <el-table-column label="发表时间" prop="createTime"></el-table-column>
      <el-table-column label="状态" prop="state"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button :icon="Refresh" circle plain type="success" @click="restoreArticle(row.id)">恢复</el-button>
          <el-button :icon="Delete" circle plain type="danger" @click="confirmPermanentDelete(row.id)">永久删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20]"
      layout="total, sizes, prev, pager, next"
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; text-align: right"
    />
  </el-card>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { articleListService, articleRestoreService, articleDeleteService } from '@/api/article.js';
import { Refresh, Delete } from '@element-plus/icons-vue';

// 文章列表数据模型
const articles = ref([]);
const pageNum = ref(1);
const pageSize = ref(5);
const total = ref(0);

// 获取回收站文章列表
const fetchArticleList = async () => {
  console.log('111');
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    state: 'deleted' // 只获取被删除的文章
  };
  const result = await articleListService(params);
  if (result.code === 200) {
    console.log('222');
    articles.value = result.data.items;
    total.value = result.data.total;
  } else {
    console.log('333');
    ElMessage.error(result.msg || '获取文章列表失败');
  }
};

// 恢复文章
const restoreArticle = async (articleId) => {
  const result = await articleRestoreService(articleId);
  if (result.code === 200) {
    ElMessage.success('文章恢复成功');
    fetchArticleList(); // 刷新回收站列表
  } else {
    ElMessage.error(result.msg || '文章恢复失败');
  }
};

// 永久删除文章
const confirmPermanentDelete = async (articleId) => {
  ElMessageBox.confirm(
    '你确认要永久删除该文章吗?',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      const result = await articleDeleteService(articleId);
      if (result.code === 200) {
        ElMessage.success('文章删除成功');
        fetchArticleList(); // 刷新回收站列表
      } else {
        ElMessage.error(result.msg || '文章删除失败');
      }
    })
    .catch(() => {
      ElMessage.info('用户取消了删除');
    });
};

// 分页事件处理
const onSizeChange = (size) => {
  pageSize.value = size;
  fetchArticleList();
};

const onCurrentChange = (num) => {
  pageNum.value = num;
  fetchArticleList();
};

// 初始化加载文章列表
fetchArticleList();
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
}
</style>